<template>
  <div class="system-settings">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <h2>系统设置</h2>
        </div>
      </template>

      <el-form
        ref="settingsForm"
        :model="settings"
        label-width="120px"
        class="settings-form"
      >
        <!-- 基本设置 -->
        <el-divider>基本设置</el-divider>
        <el-form-item label="系统语言">
          <el-select v-model="settings.language" placeholder="请选择系统语言">
            <el-option label="简体中文" value="zh-CN" />
            <el-option label="English" value="en-US" />
          </el-select>
        </el-form-item>

        <el-form-item label="主题设置">
          <el-radio-group v-model="settings.theme">
            <el-radio value="light" label="浅色主题"></el-radio>
            <el-radio value="dark" label="深色主题"></el-radio>
            <el-radio value="auto" label="跟随系统"></el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 通知设置 -->
        <el-divider>通知设置</el-divider>
        <el-form-item label="系统通知">
          <el-switch v-model="settings.notifications.system" />
        </el-form-item>

        <el-form-item label="邮件通知">
          <el-switch v-model="settings.notifications.email" />
        </el-form-item>

        <el-form-item label="通知频率">
          <el-select v-model="settings.notifications.frequency" placeholder="请选择通知频率">
            <el-option label="实时" value="realtime" />
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
          </el-select>
        </el-form-item>

        <!-- 文档设置 -->
        <el-divider>文档设置</el-divider>
        <el-form-item label="默认文档排序">
          <el-select v-model="settings.documents.defaultSort" placeholder="请选择默认排序方式">
            <el-option label="按名称" value="name" />
            <el-option label="按修改时间" value="modified" />
            <el-option label="按创建时间" value="created" />
          </el-select>
        </el-form-item>

        <el-form-item label="文档预览">
          <el-switch v-model="settings.documents.preview" />
        </el-form-item>

        <!-- 存储设置 -->
        <el-divider>存储设置</el-divider>
        <el-form-item label="存储空间">
          <el-progress
            :percentage="storageUsage.percentage"
            :format="percentageFormat"
            :status="storageUsage.status"
          />
          <div class="storage-info">
            已使用 {{ formatSize(storageUsage.used) }} / {{ formatSize(storageUsage.total) }}
          </div>
        </el-form-item>

        <!-- 保存按钮 -->
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="resetSettings">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const settings = ref({
  language: 'zh-CN',
  theme: 'light',
  notifications: {
    system: true,
    email: true,
    frequency: 'realtime'
  },
  documents: {
    defaultSort: 'modified',
    preview: true
  }
})

const storageUsage = ref({
  used: 5 * 1024 * 1024 * 1024, // 5GB
  total: 10 * 1024 * 1024 * 1024, // 10GB
  get percentage() {
    return Math.round((this.used / this.total) * 100)
  },
  get status() {
    const percentage = this.percentage
    if (percentage >= 90) return 'exception'
    if (percentage >= 70) return 'warning'
    return 'success'
  }
})

const formatSize = (bytes) => {
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
  let size = bytes
  let unitIndex = 0

  while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex++
  }

  return `${size.toFixed(2)} ${units[unitIndex]}`
}

const percentageFormat = (percentage) => {
  return `${percentage}%`
}

const saveSettings = () => {
  // 这里应该调用API保存设置
  ElMessage.success('设置保存成功')
}

const resetSettings = () => {
  // 重置为默认设置
  settings.value = {
    language: 'zh-CN',
    theme: 'light',
    notifications: {
      system: true,
      email: true,
      frequency: 'realtime'
    },
    documents: {
      defaultSort: 'modified',
      preview: true
    }
  }
  ElMessage.info('设置已重置')
}
</script>

<style scoped>
.system-settings {
  max-width: 800px;
  margin: 0 auto;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.settings-form {
  margin-top: 20px;
}

.storage-info {
  margin-top: 8px;
  color: #909399;
  font-size: 14px;
}

.el-divider {
  margin: 24px 0;
}

.el-form-item {
  margin-bottom: 22px;
}
</style> 